<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="true">
        <span slot="before">共0条考勤审批尚未条处理</span>
        <template slot="after">
          <el-button size="small" type="primary">导入</el-button>
          <el-button size="small" type="primary">提醒</el-button>
          <el-button size="small" type="primary">设置</el-button>
          <el-button size="small" type="primary">历史档案</el-button>
          <el-button size="small" type="primary">月份报表</el-button>
        </template>
      </PageTools>

      <!-- 放置表格和分页 -->
      <el-card>
        <module :big-list="Allemployees" @filterchang="filterchang" />
        <el-table
          :data="pageList"
          style="width: 100%"
          border
        >
          <el-table-column
            label="序号"
            width="180"
            type="index"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="180"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="180"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="180"
          />
          <el-table-column
            v-for="(value,index) in bigList"
            :key="value"
            :label="value+''"
            width="180"
          >
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | FormData }}
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- :total="total"  总数多少条 -->
          <!-- :page-size="pageSetting.size"   每页多少条 -->
          <!-- @current-change="currentchange"   页码改变时会触发 -->
          <el-pagination
            layout="prev, pager, next"
            :total="filterList.length"
            :page-size="pageSetting.size"
            @current-change="currentchange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入 获取考勤列表假数据接口
import { getAttendancesListMock } from '../../api/attendances'
// 引入枚举
import enumeration from '../../api/constant/attendance'
// 组件
import module from './components/filter.vue'
export default {
  components: {
    module
  },
  // 过滤器
  filters: {
    FormData(id) {
      // console.log('牛逼', id)
      if (id === 0) {
        return ''
      }
      // 定义一个变量，拿到枚举数据这个数组,使用 find进行变量，当 item.id === 我们传进来的id，
      // 这里把 item.id 和id 都转成数字格式，这样全等于就不容易出错
      const obj = enumeration.holidayType.find(item => Number(item.id) === Number(id))
      // 那就  return 返回 obj.value
      return obj ? obj.value : '未知'
    }
  },
  data() {
    return {
      Allemployees: [], // 伪数据
      filterList: [], // 过滤后的数据
      pageSetting: {
        page: 1, // 页码,就是第几页的意思
        size: 10 // 	每页条数
      }
    }
  },
  // 计算属性
  computed: {
    // 计算出 31天 ， 拿去遍历可以获取到31天
    bigList() {
      if (this.Allemployees.length === 0) {
        return []
      }
      // return返回数据,拿到伪数里面的 attendanceRecord.map 进行遍历，item指向day， 所有伪数据都有day这个键，使用这个计算属性就会有这个值
      return this.Allemployees[0].attendanceRecord.map(item => item.day)
    },
    pageList() {
      // 之前有  Allemployees 一百条
      // 后面 filterList 是过滤后的结果
      // 这里需要计算出每页开始和结束下标，截取数组即可

      // 用每页的条数乘当前的页码，就可以拿到当前页码的最后一条数据
      const endindex = this.pageSetting.size * this.pageSetting.page

      // 这里是拿开始值
      // 用结束值，减去当前的条数，就可以拿到开始值了
      const togindex = endindex - this.pageSetting.size

      // return返回 ， 拿到伪数据，使用 slice截取数组，把开始值，和结束值丢进去
      return this.filterList.slice(togindex, endindex)
    }
  },
  async created() {
    // 伪数据
    const res = await getAttendancesListMock()
    console.log(21, res)
    this.Allemployees = res
    this.filterList = [...this.Allemployees]
  },
  methods: {
    // 被点击的部门数据
    filterchang(newList) {
      console.log(136, newList)
      this.filterList = newList
    },
    // 分页功能
    currentchange(newPage) {
      console.log(129, newPage)
      this.pageSetting.page = newPage
    }
  }
}
</script>

<style lang="less" scoped>
.el-card{
  margin-top: 50px;
}
.department{
  display: flex;
  .bum{
    width: 250px;
    font-weight: 700;
  }
  .Checkbox{
    line-height: 40px;
  }
}
.status{
  display: flex;
  .kaoq{
  font-weight: 700;
  width: 200px;
  }
}
</style>
